<template>
		<!-- 下雨 -->
		<view class="body_yu">
			<view class="container">
				<view class="rain" v-for="(i,index) in styleList" :key="index">
					<!-- <span :style="i"></span> -->
					<image class="img" :style="i" src="@/static/weather/yudi.png" mode=""></image>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				styleList: [] // 存储雨滴数据的数组
			}
		},
		mounted() {
			this.xiayuFn();
		},
		methods: {
			xiayuFn() {
				for (let i = 0; i < 50; i++) {
					let obj = "--i:" + this.getRandomNumber(10, 60)
					this.styleList.push(obj)
				}
			},
			// 随机数
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
		}
	}
</script>

<style scoped lang="scss">
	// 下雨css
	.body_yu {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;

		.container {
			position: relative;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;

			.rain {
				position: relative;
				display: flex;
				z-index: 1;
			}

			.rain .img {
				position: relative;
				bottom: 10 0rpx;
				width: 2rpx;
				height: 10rpx;
				margin: 0 1px;
				// background-color: rgba(255, 255, 255, 0.3);
				animation: animate 1s linear infinite;
				animation-duration: calc(15s/var(--i));
				transform-origin: bottom;
			}

			@keyframes animate {
				0% {
					transform: translateY(0) scaleY(1);
				}

				70% {
					transform: translateY(120rpx) scaleY(1);
				}

				100% {
					transform: translateY(120rpx) scaleY(0.1) scaleX(5);
				}
			}
		}
	}
</style>